<!-- 机构管理 -->
<template>
  <div
    class="organization-manage org log-list customer-list-box dashboard-container"
  >
    <div class="test">
      <!-- 左侧树形结构树 -->
      <div class="log-list-left">
        <el-scrollbar style="width: 100%;margin-bottom:50px">
          <el-card class="box-card" shadow="never">
            <div class="app-container">
              <el-tree
                ref="orgTree"
                style="font-size: 12px display: none;"
                :props="defaultProps"
                :check-strictly="true"
                :data="orgTree"
                :indent="22"
                :filter-node-method="filterNode"
                highlight-current
                node-key="id"
                :expand-on-click-node="false"
                class="filter-tree customer-tree-box"
                :default-expanded-keys="treeExpandData"
                @node-click="nodeClick"
              />
            </div>
          </el-card>
        </el-scrollbar>
      </div>
      <!-- 右侧结构树对应的内容 -->
      <div class="log-list-right">
        <el-card class="box-card" shadow="always">
          <div slot="header" class="clearfix">
            <span>机构信息</span>
          </div>
          <div>
            <el-form ref="form" :model="org" label-position="right" label-width="120px" style="width: 90%; text-align: center" class="form-bottom">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="机构编号" v-if="!isNewOrgan">
                    <el-input v-model="org.id" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="机构名称">
                    <el-input v-model="org.name" :disabled="!isNewOrgan"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <!-- 组织类型 -->
                  <el-form-item label="机构类型" prop="orgType" disabled>
                    <el-select v-model="org.type" :disabled="!isNewOrgan" clearable placeholder="请选择" style="width: 100%" @change="getOrganization($event, true)">
                      <el-option v-for="item in orgTypeOptions" :key="item.value" :label="item.key" :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="上级机构" prop="parentId" v-if="isNewOrgan">
                    <el-select v-model="org.parentId" value-key="id" clearable placeholder="从属机构" :disabled="org.type === 1">
                      <el-option v-for="item in organizationList" :key="item.id" :label="item.name" :value="item.id"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <!-- 地址 -->
                  <el-form-item label="机构地址" prop="describe">
                    <el-row :gutter="24" style="margin: 0">
                      <el-col :span="8" style="padding: 0">
                        <el-select v-model="org.province"
                          placeholder="省份" value-key="id" clearable :disabled="!isCanSubmit && !isNewOrgan" @change="getThreePosition($event, true)">
                          <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                      </el-col>
                      <el-col :span="8" style="padding: 0 4px">
                        <el-select v-model="org.city"
                          value-key="id" clearable placeholder="城市" :disabled="!isCanSubmit && !isNewOrgan" @change="getCounty($event, true)">
                          <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.name"/>
                        </el-select>
                      </el-col>
                      <el-col :span="8" style="padding: 0">
                        <el-select v-model="org.county" value-key="id" clearable
                          placeholder="区县" :disabled="!isCanSubmit && !isNewOrgan" @change="getCurrent">
                          <el-option v-for="item in countyList" :key="item.id" :label="item.name" :value="item.name"/>
                        </el-select>
                      </el-col>
                    </el-row> </el-form-item></el-col>
                <el-col :span="8">
                  <!-- 机构负责人 -->
                  <el-form-item label="详细地址" prop="address">
                    <el-input
                      v-model="org.address"
                      maxlength="20"
                      :disabled="!isCanSubmit && !isNewOrgan"
                    />
                  </el-form-item></el-col>
                <el-col :span="8">
                  <!-- 经度 -->
                  <el-form-item label="经度" prop="longitude">
                    <el-input v-model="org.longitude" disabled maxlength="20">
                      <span slot="suffix" style="color: #20232a;
                          font-weight: 400;
                          font-size: 14px;
                          font-family: PingFangSC, PingFangSC-Regular;
                          margin-right: 14px;
                          line-height: 40px;">E</span>
                    </el-input>
                  </el-form-item></el-col>
                <el-col :span="8">
                  <!-- 纬度 -->
                  <el-form-item label="纬度" prop="latitude">
                    <el-input v-model="org.latitude" disabled maxlength="20">
                      <span slot="suffix" style=" color: #20232a;
                          font-weight: 400;
                          font-size: 14px;
                          font-family: PingFangSC, PingFangSC-Regular;
                          margin-right: 14px;
                          line-height: 40px;">N</span>
                    </el-input>
                  </el-form-item></el-col>
                <el-col :span="8">
                  <!-- 机构负责人 -->
                  <el-form-item label="机构负责人" prop="contractNumber">
                    <el-input v-model="org.managerName" maxlength="20" :disabled="!isCanSubmit && !isNewOrgan"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="机构电话" prop="abbreviation">
                    <el-input v-model="org.phone" maxlength="200" :disabled="!isCanSubmit && !isNewOrgan"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-button type="warning" style="width: 89px; height: 36px; padding: 10px 20px" @click="submit" :disabled="isNewOrgan">{{ isCanSubmit ? '保存' : '编辑' }}</el-button>
              <el-button type="success" style="width: 89px; height: 36px; padding: 10px 20px" @click="addOrg" :disabled="isCanSubmit">{{ isNewOrgan ? '保存' : '新增' }}</el-button>
            </el-form>
          </div>
        </el-card>
        <el-card class="box-card org-index" style="margin-top: 20px; box-shadow: none">
          <div slot="header" class="clearfix"><span>员工信息</span></div>
          <el-table v-if="dataList && dataList.length > 0" ref="multipleTable" :data="dataList"
            fit style="width: 100%" stripe :header-cell-style="{ background: 'rgba(250,252,255,1)' }">
            <el-table-column type="index" label="序号" width="60"/>
            <el-table-column prop="username" align="center" label="员工账号" min-width="150"></el-table-column>
            <el-table-column prop="nickname" align="center" label="员工姓名" min-width="150"></el-table-column>
            <el-table-column prop="mobile" align="center" label="手机" min-width="150"></el-table-column>
            <el-table-column prop="email" align="center" label="邮箱" min-width="150"></el-table-column>
            <el-table-column align="center" label="账号状态">
              <template slot-scope="scope">
                <el-tag v-for="item in baseOptions" v-if="scope.row.commonStatus === item.value" size="small" :key="item.vaule" type="success">
                  {{ item.key }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <empty v-else src="../../assets/empty.png" desc="这里空空如也~"></empty>
          <!-- end -->
          <!-- 分页 -->
          <div v-show="total > 5" class="pagination">
            <div class="pages">
              <el-pagination
                :current-page="Number(requestParameters.pageNum)"
                :total="Number(total)"
                :page-size="Number(requestParameters.pageSize)"
                :page-sizes="[5, 10, 20, 40]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { areaList, enumsList, queryThreePosition, queryPositionDetails} from '@/api/common'
import { agencyList, detail, getParentOrganization, saveOrUpdate, getuserByAgency } from '@/api/institutions'
export default {
  name: 'OrgManager',
  data() {
    return {
      total: 0,
      requestParameters: {
        pageNum: 1, // 当前页
        pageSize: 5, // 每页条数
        organizationId: '' // 机构id
      },
      dataList: [],
      organizationList: [],  //机构列表
      orgTypeOptions: '', // 机构类型
      baseOptions: '',    // 数据类型
      defaultProps: {
        children: 'children', // 子节点
        label: 'name' // 显示的名称
      },
      treeExpandData: [], // 树形展开的数据
      treeExpandData2: [], // 树形默认展开的数据
      provincialCenterId: '', // 省级中心id
      provincialCenterId2: [], // 省级树形默认展开中心id
      name: '', // 机构名称
      orgTree: [], // 树形数据
      parentName: '无上级',
      provinceList: [], // 省列表
      cityList: [], // 市列表
      countyList: [], // 县区列表
      threePosition: '', //单个省三级行政单位
      isCanSubmit: false, // 是否处于编辑状态
      isNewOrgan: false, // 是否处于新增状态
      org: this.initOrg() // 机构信息数据
    }
  },
  mounted() {
    this.initOrgTree()
    this.getEnums()
  },
  methods: {
    // 初始化
    initOrg() {
      return {
        id: '',
        name: '',
        type: '',
        address: '',
        managerName: '',
        province: '',
        city: '',
        count: '',
        phone: '',
        parentId: 0,
        latitude: '',
        longitude: ''
      }
    },
    // 提交修改当前数据
    submit() {
      this.getProvince()
      const data = this.org
      // 判断是否可以提交
      if (!this.isCanSubmit) {
        return (this.isCanSubmit = !this.isCanSubmit)
      }
      if (!data.address) {
        return this.$message.error('请填写详细地址')
      } 
      saveOrUpdate(data)
        .then((res) => {
          if (Number(res.code) === 200) {
            this.$message.success('机构信息保存成功')
            this.isCanSubmit = false
          } else {
            this.$message.error(res.msg || '机构信息保存失败')
          }
        })
        .catch((err) => {
          this.$message.error(err.msg || '机构信息保存失败')
        })
    },
    //新增机构
    addOrg() {
      if (!this.isNewOrgan) {
        this.org.parentId = null
        this.org.id = null
        this.org.name = null
        this.org.type = null
        this.org.province = null
        this.org.city = null
        this.org.county = null
        this.org.address = null
        this.org.longitude = null
        this.org.latitude = null
        this.org.managerName = null
        this.org.phone = null
        this.org.createTime = null
        this.org.updateTime = null
        this.getProvince()
        return (this.isNewOrgan = !this.isNewOrgan)
      }
      saveOrUpdate(this.org)
        .then((res) => {
          if (Number(res.code) === 200) {
            this.$message.success('机构信息新增成功')
            this.isNewOrgan = false
            location.reload()
          } else {
            this.$message.error(res.msg || '机构信息新增失败')
          }
        })
        .catch((err) => {
          this.$message.error(err.msg || '机构信息新增失败')
        })
    },
    // 获取父类机构
    getOrganization(val) {
      getParentOrganization(val).then((response) => {
        this.organizationList = response.data    
      })
    },
    // 获取省信息
    getProvince() {
      areaList().then((response) => {
        this.provinceList = response.data
        if (this.org.province) {
          queryThreePosition(this.provinceList.find(item => item.name === this.org.province).id).then((response) => {
            this.threePosition = response.data
            this.cityList = response.data[0].children
            this.countyList = this.cityList.find(item => item.name === this.org.city).children
          }) 
        } else {
          queryThreePosition(this.provinceList[0].id).then((response) => {
            this.threePosition = response.data
            this.cityList = response.data[0].children
            this.countyList = this.cityList[0].children            
          }) 
        }            
      })
    },
    // 获取省市县信息
    getThreePosition(val) {
      queryThreePosition(val).then((response) => {
        this.threePosition = response.data
        this.cityList = response.data[0].children
        this.org.city = this.cityList[0].name
        this.countyList = this.cityList[0].children
        this.org.county =  this.countyList[0].name
        this.org.address = this.threePosition[0].name + this.org.city + this.org.county
        queryPositionDetails(this.countyList[0].id).then((response) => {
          this.org.latitude = response.data.latitude
          this.org.longitude = response.data.longitude
        })
      })
    },
    // 获取县区信息，获取到市之后才能够继续进行，因此事件需要绑定在市上
    getCounty(val) {
      const counts = this.cityList.find(item => item.name === val)
      this.countyList = counts.children
      this.org.county =  this.countyList[0].name
      queryPositionDetails(this.countyList[0].id).then((response) => {
        this.org.latitude = response.data.latitude
        this.org.longitude = response.data.longitude
      })
    },
    // 详细地址及经纬度
    getCurrent(val) {
      this.org.province = this.threePosition[0].name
      this.org.address = this.org.province + this.org.city + this.org.county
      const address = this.countyList.find(item => item.name === val)
      queryPositionDetails(address.id).then((response) => {
        this.org.latitude = response.data.latitude
        this.org.longitude = response.data.longitude
      })
    },
    // 获取树形结构默认展开节点
    getExpandData(provincialCenterId) {
      this.treeExpandData.push(provincialCenterId)
    },
    getExpandData2(provincialCenterId2) {
      // 将传入的数据添加到treeExpandData2中
      this.treeExpandData2 = [provincialCenterId2]
      const _this = this
      // 加入延时函数是因为需要等待页面数据加载完毕
      setTimeout(() => {_this.nodeClick(provincialCenterId2)}, 50)
    },
    // 初始化机构数
    initOrgTree() {
      agencyList().then((response) => {
        this.orgTree = response.data
        this.provincialCenterId = this.orgTree[0].children[0].id // 默认展开第一个节点下的第一个节点
        this.provincialCenterId2 = this.orgTree[0].children[0].children[0]
        this.$nextTick(function () {
          this.$refs['orgTree'].setCurrentKey(
            this.orgTree[0].children[0].children[0].id
          )
        })
        this.getExpandData2(this.provincialCenterId2)
        this.getExpandData(this.provincialCenterId)
      })
    },
    // 过滤器，过滤出空数据和不存在的数据
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 树形点击事件
    nodeClick(data) {
      this.requestParameters.organizationId = data.id
      this.isCanSubmit = false
      this.showEdit = true
      this.showSave = false
      // 获取机构详情
      detail(data.id)
        .then((response) => {
          this.org = response.data
        })
        .catch(() => {
          this.$message.error('获取机构详情失败')
          this.org = this.initOrg()
        })
      this.getList()
    },
    getList() {
      // 获取机构下的员工列表数据
      getuserByAgency(this.requestParameters).then((res) => {
        this.dataList = res.data.records
        this.total = res.data.total
      })
    },
    // 枚举获取
    getEnums() {
      enumsList().then((response) => {
        this.orgTypeOptions = response.data.DepartmentTypeEnum
        this.baseOptions = response.data.BaseEnum
      })
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pageSize = val
      if (this.requestParameters.pageNum === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.pageNum = val
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .customer-tree-box {
  .el-tree-node {
    margin: 2px 0 !important;
    .is-focusable {
      position: relative;
      &::before {
        content: '';
        display: inline-block;
        position: absolute;
        left: 6px;
        // width: 1px;
        border-left: #e5e7ec solid 1px;
        height: calc(100% + 3px);
        // 将此类名的最后一项样式设置为none
        &:last-child {
          border-left: none !important;
        }
      }
      margin: 2px 0 !important;
      .el-tree-node {
        .el-tree-node__children {
          margin: 2px 0 !important;
          .el-tree-node {
            .el-tree-node__content {
              .el-tree-node__expand-icon {
                display: none;
              }
              .el-tree-node__label {
                margin-left: 0px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 131px;
              }
            }
          }
        }
      }
    }
  }
  .el-tree-node {
    .el-tree-node {
      .el-tree-node {
        position: relative;
        &::before {
          content: '';
          display: inline-block;
          position: absolute;
          left: 26px;
          // width: 1px;
          border-left: #e5e7ec solid 1px;
          height: calc(100% + 3px);
        }
        // 将此类名的最后一项样式设置为none
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.organization-manage {
  // overflow-x: scroll;
  min-height: 870px;
  padding-top: 23px !important;
  .log-list-left {
    height: auto !important;
    border-radius: 4px;
    width: 214px;
    // 设置内边距
    padding-left: 9px;
    ::v-deep .customer-tree-box {
      .el-tree-node {
        margin: 5px 0 !important;
        .el-tree-node__children {
          margin: 2px 0 !important;
          .el-tree-node {
            .el-tree-node__children {
              margin: 2px 0 !important;
              .el-tree-node {
                .el-tree-node__content {
                  .el-tree-node__expand-icon {
                    display: none;
                  }
                  .el-tree-node__label {
                    margin-left: 0px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 131px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .log-list-right {
    ::v-deep .el-card__header {
      color: #2a2929;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .el-tree {
    padding-left: 10px;
    margin-top: 5px;
  }
  .app-container {
    background-color: white;
  }
  .pagination {
    text-align: center;
    margin-top: 26px;
    padding-bottom: 40px;
  }
  ::v-deep .el-card__body {
    padding: 0;
    padding-top: 10px;
    .app-container {
      padding: 0;
    }
  }

  .el-form--label-right {
    padding: 20px 0;
    width: 100% !important;
    padding-right: 37px;
  }

  ::v-deep .el-tree-node__content {
    margin-right: 20px;
  }
}

.addEdit {
  background-color: #e05635;
  color: #fff;
  border-radius: 5px;
  &:hover {
    background-color: #e05635;
    color: #fff;
    border-color: #dcdfe6;
  }
}
.org {
  .app-container {
    margin: 0 0 10px 0 !important;
  }
}
.el-card {
  border-radius: 8px;
  border: none;
  .el-card__header {
    background: #f8faff;
    border-bottom: 0px solid #e6ebf5;
  }
}

.log-list {
  width: 100%;
  padding: 20px;
  padding-top: 0;
  .test {
    width: 100%;
    display: -webkit-box;
    // display: flex;
    ::v-deep .el-row {
      width: 100%;
    }
    .log-list-right {
      flex: 1;
      // 新添加的
      margin-left: 20px;

      .log-list-right-table {
        min-height: calc(75vh - 0px);
      }
      ::v-deep .el-card__header {
        background-color: #fafafa;
        // border-radius: 8px 8px 0 0;
      }
      ::v-deep .el-card.is-always-shadow {
        border-radius: 4px !important;
        box-shadow: none;
      }
      ::v-deep .el-select {
        width: 100%;
      }
      // 新添加的
      ::v-deep .custom-theme .el-input.is-disabled .el-input__inner {
        background-color: #fafafa !important;
        color: red;
      }
    }
    .log-list-left,
    .log-list-right {
      // height: 870px;

      background-color: #fff;
      border-radius: 4px;
      ::v-deep .el-scrollbar {
        border-radius: 8px;
      }
    }
    .log-list-right{
      background-color: #f3f4f7;
    }
  }

  ::v-deep .org-index {
    .el-card__body {
      // border-top: 1px solid #e5e7ec;
      // margin: 0px 60px;
      box-sizing: border-box;
      padding-top: 20px !important;
      padding: 0 28px;
      padding-bottom: 20px;
    }
  }
}
::v-deep .el-pager li.active {
  color: #e15536;
}
::v-deep .el-pagination__total {
  color: #20232a;
}
::v-deep .el-pagination button:hover {
  color: #e15536;
}
::v-deep .el-pagination__sizes .el-input .el-input__inner:hover {
  border-color: #e15536;
}
</style>
